<template>
    <div class="background">
        <div v-if="isMessage" class="scrollContainer">
            <div v-for="(message, i) in messages"
                :class="[i != messages.length - 1 ? 'cardContainer' : 'lastCardContainer']">
                <div class="card">
                    <div class="main">
                        <div class="avatarBlank">
                            <div class="avatar">
                                <img style="width: 100%;height: 100%;object-fit: cover;" :src="message.avatar" alt="加载失败">
                            </div>
                            <div style="display: flex;flex-direction: column;margin-left: 3%;">
                                <div class="nickName">{{ message.nickname }}</div>
                                <div class="userId">{{ message.userId }}</div>
                            </div>
                        </div>
                        <div style="display: flex;flex-direction: row-reverse">
                            <img class="icons" src="../assets/logo组.jpg" alt="加载失败">
                        </div>
                        <div class="image-container">
                            <img @click.native="scaleImage(message.image)" class="image" :src="message.image"
                                alt="加载失败">
                            <img style="width: 100%;position: absolute;left: 0" src="../assets/imageContainer.png"
                                alt="加载失败">
                        </div>
                        <div class="id">{{ "ID" + message.id + ":" }}</div>
                        <div class="content">{{ message.content }}
                        </div>
                        <div v-if="message.time.day" class="timeBlank">
                            <div class="weekDay">{{ "周" + message.time.weekDay }}</div>
                            <div class="date">
                                <div class="solar">{{ message.time.month + "月" + message.time.day + "日" }}</div>
                                <div class="lunar">{{ message.time.lunar }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-if="i == messages.length - 1" style="display: flex;justify-content: center;margin-top: 10%;">
                    <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="4"
                        :page-count="pageCount" layout="prev,pager,next">
                    </el-pagination>
                </div>
            </div>
        </div>
    <div v-else style="color: white;font-size: 4vw;font-family: qianXiaTi">您暂时没有精选留言</div>
    </div>
    <el-button @click="back" circle
        style="position: fixed;left: 10%;top: 9%;background-color: #8E2020;border: 3px solid white;width: 9vw;height: 9vw">
        <el-icon style="vertical-align: middle;font-size: 5vw">
            <arrow-left style="color:white;" />
        </el-icon>
    </el-button>
    <div v-if="isImageVisible" class="image-modal" v-on:click="hideImage">
        <img v-bind:src="messageImageUrl" class="modal-image">
    </div>
</template>
<script setup>
import router from '@/router';
import { onBeforeMount, ref, onMounted } from "vue"
import { Solar, Lunar, HolidayUtil } from 'lunar-javascript';
import axios from 'axios';
const isMessage = ref(false)
const messages = ref([]);
const isImageVisible = ref(false);
const messageImageUrl = ref('');
const currentPage = ref(1);
const pageCount = ref();

function scaleImage(imageSrc) {
    messageImageUrl.value = imageSrc
    isImageVisible.value = true
}

function hideImage() {
    isImageVisible.value = false
}

const back = () => {
    router.push("/Message")
}


function parseLunarDate(dateString) {
    var time = {};
    const solar = new Date(dateString);
    const lunar = new Lunar.fromDate(solar);
    var month = String(solar.getMonth() + 1);
    var weekDay = String(solar.getDay());
    var day = String(solar.getDate());
    const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
    time.month = month;
    time.day = day;
    time.weekDay = weekDays[weekDay];
    time.lunar = lunar.toFullString().slice(5, 9);
    console.log(time);
    return time;
}

onBeforeMount(() => {
    axios({
        method: "post",
        url: "/post/mySelected",
        data: {
            page: currentPage.value
        },
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    })
        .then(function (response) {
            if(response.data.data.postsList){
            isMessage.value = true;
            messages.value = response.data.data.postsList;
            pageCount.value = response.data.data.totalPageNum;
            messages.value.forEach(element => {
                element.time = parseLunarDate(element.time * 1000)
            });
            console.log(messages.value)
        }
        })
})


const handleCurrentChange = (val) => {
    currentPage.value = val;
    axios({
        method: "post",
        url: "/post/mySelected",
        data: {
            page: currentPage.value
        },
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    })
        .then(function (response) {
            console.log(response.data.data)
            response.data.data.postsList.forEach(element => {
                element.time = parseLunarDate(element.time * 1000)
            });
            messages.value = response.data.data.postsList;
            pageCount.value = response.data.data.totalPageNum
            isMessage.value = true
            console.log("到页首")
            document.getElementsByClassName("scrollContainer")[0].scrollTop = 0;
        })
}

// onMounted(()=>{
//     messages.value = [{
//             nickname: '张三',
//             userId:20202020,
//             id:10,
//             time: '1714313892',
//             content: '今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好',
//             image: 'https://picsum.photos/200/300',
//             avatar: 'https://picsum.photos/200/300'
//         },
//         {
//             nickname: '张三',
//             userId:20202020,
//             id:10,
//             time: '1714313892',
//             content: '今天天气真好2',
//             image: 'https://picsum.photos/200/300',
//             avatar: 'https://picsum.photos/200/300'
//         },
//         {
//             nickname: '张三',
//             userId:20202020,
//             id:10,
//             time: '1714313892',
//             content: '今天天气真好3',
//             image: 'https://picsum.photos/200/300',
//             avatar: 'https://picsum.photos/200/300'
//         },
//         {
//             nickname: '张三',
//             userId:20202020,
//             id:10,
//             time: '1714313892',
//             content: '今天天气真好4',
//             image: 'https://picsum.photos/200/300',
//             avatar: 'https://picsum.photos/200/300'
//         }]
//         messages.value.forEach(element => {
//             element.time = parseLunarDate(element.time*1000)
//         });
// })


</script>
<style scoped>
@font-face {
    font-family: Rousseau-Deco-2;
    src: url("../assets/Rousseau-Deco-2.ttf");
}

@font-face {
    font-family: Worthwhile;
    src: url("../assets/字魂不虚此行体(商用需授权).ttf");
}

@font-face {
    font-family: qianXiaTi;
    src: url("../assets/2d378ef93706d142aac8e560fcfabbc9.ttf");
}

.background {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0px;
    background: url("../assets/poster.png") no-repeat;
    overflow: hidden;
    background-size: cover;
    background-position:bottom center;
}

.scrollContainer {
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    /* 启用水平滚动吸附，并强制吸附到最近的snap点 */
    scroll-padding: 50px;
    /* 为吸附点提供一些内边距，防止卡片被完全遮挡 */
    scroll-behavior: smooth;
    /* 平滑滚动 */
    width: 100%;
    white-space: nowrap;
    /* 防止卡片换行 */
}

.scrollContainer::-webkit-scrollbar {
    display: none;
    /* 隐藏滚动条 */
}

.cardContainer {
    width: 100%;
    margin-top: 30%;
    margin-bottom: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.lastCardContainer {
    width: 100%;
    margin-top: 30%;
    margin-bottom: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    scroll-snap-align: end;
    scroll-snap-stop: always;
}

.card {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    padding: 5%;
    padding-top: 10%;
    background: url("../assets/cardBackground.png") no-repeat;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    /* border-radius: 30px;
    background: rgba(255, 255, 255, .7);
	backdrop-filter: blur(10px); */
    width: 80%;
    max-width: 820px;
    aspect-ratio: 2.1 / 3;
    /* box-shadow: 8px 16px 30px rgba(0, 0, 0, 0.5); */
}

.avatarBlank {
    align-items: center;
    margin-top: 5%;
    width: 100%;
    display: flex;
    flex-direction: row
}

.avatar {
    object-fit: cover;
    width: 13%;
    aspect-ratio: 1;
    border: 3px solid white;
    border-radius: 25%;
    overflow: hidden;
}

.main {
    width: 100%;
    height: fit-content;
}

.image {
    pointer-events: auto;
    object-fit: cover;
    width: 100%;
}

.image-container {
    display: flex;
    justify-content: center;
    border-radius: 7.1% 7.1% 7.1% 7.1% / 12.6% 12.6% 12.6% 12.6%;
    position: relative;
    margin-top: 3%;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    pointer-events: none;
}

.content {
    font-family: qianXiaTi;
    font-size: min(41px, 4vw);
    color: white;
    width: 100%;
    white-space: normal;
    height: 13vw;
    overflow: auto;
}

.time {
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: qianXiaTi;
    font-size: 25px;
    color: #3a454d;
}

.nickName {
    color: white;
    font-size: min(50px, 5vw);
    font-family: qianXiaTi
}

.userId {
    color: white;
    font-size: min(41px, 4vw);
    font-family: qianXiaTi
}

.icons {
    margin-right: 8%;
    width: 32%;
}

.id {
    color: white;
    font-size: min(41px, 4vw);
    font-family: qianXiaTi;
}

.weekDay {
    width: 100%;
    font-family: qianXiaTi;
    color: white;
    font-size: min(51.25px, 5vw);
}

.solar {
    font-family: qianXiaTi;
    color: white;
    font-size: min(41px, 4vw);
}

.lunar {
    font-family: qianXiaTi;
    color: white;
    font-size: min(41px, 4vw);
}

.timeBlank {
    width: 100%;
    margin-top: 10%;
    display: flex;
    flex-direction: column;
}

.date {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-image {
    object-fit: contain;
    min-height: 60%;
    max-width: 80%;
    max-height: 80%;
}
::v-deep .el-pager li.is-active{
  color: #85000b !important;
}
::v-deep .el-pagination button{
    background: rgba(255, 255, 255, 0.837);
    backdrop-filter: blur(10px);
}
::v-deep .el-pager li{
    background: rgba(255, 255, 255, 0.837);
    backdrop-filter: blur(10px);
}
</style>